<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="front-common :: commonCss(~{::title},~{},~{},~{::style})">
    <title>JAVA课程在线考试</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        .exam-grid{
            background-color: #ffffff;
            margin-bottom: 15px;
        }
        .exam-grid span{
            margin-right: 5px;
            white-space: nowrap;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 50%;
            cursor:pointer
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div th:replace="front-common::header('exam')"></div>

    <div class="layui-layout-body layui-bg-gray">
        <div class="layui-container" style="margin-top: 100px;margin-bottom: 50px;">
            <div class="flow-default layui-row layui-col-space30" style="padding-bottom: 30px" id="ExamInfoFlow">
            </div>
        </div>
        <div th:replace="front-common::footer"></div>
    </div>

</div>
</body>

<script th:inline="javascript">
    layui.use(['flow'], function() {
        var flow = layui.flow;
        var $ = layui.jquery;

        loadFlow();

        function loadFlow(){
            flow.load({
                elem: '#ExamInfoFlow'
                ,end:
                    "<div class='layui-col-md12' style='text-align: center'>" +
                    "<hr/>" +
                    "<a>已经拉到底啦</a>" +
                    "</div>"
                , done: function (page, next) {
                    $.ajax({
                        url:'/exam/listMyExamForPage/'+page,
                        type : 'get',
                        contentType : 'application/json',
                        dataType: 'json',
                        success:function (data){
                            var lis = [];
                            layui.each(data.data.records, function(index, item){
                                var attendHtml = "";
                                if(item.state===0 || item.state===1){
                                    attendHtml = "<a target='_blank'  href='/exam/view/"+item.id+"' class='layui-btn layui-btn-normal' style='float:right'>参加考试</a>\n"
                                }else{
                                    attendHtml = "<a class='layui-btn layui-btn-disabled' style='float:right'>已结束</a>\n"
                                }
                                lis.push(
                                    "<div class='exam-grid layui-panel layui-col-md12'>\n" +
                                    "    <a>\n" +
                                    "        <span style='color: #5FB878;font-size: 16px'>"+item.title+"</span>\n" +
                                    "    </a><br/>\n" +
                                    "    <a>\n" +
                                    "        <span style='color: #FF5722;font-size: 16px'>考试时间："+item.startTime+" ~ "+item.endTime+"</span>\n" +
                                    "        <span style='color: #404040;font-size: 14px'> (用时"+item.time+"分钟)</span>\n" +
                                    attendHtml +
                                    "    </a>\n" +
                                    "    <div>\n" +
                                    "        <span style='color: #cccccc;font-size: 12px'>发布人："+item.createUserName+"</span>\n" +
                                    "        <span style='color: #cccccc;font-size: 12px'>发布时间："+item.createTime+"</span>\n" +
                                    "    </div>\n" +
                                    "</div>");
                            });
                            next(lis.join(''), page  <  data.data.total/6);
                        }
                    });
                }
            });
        }

    })
</script>
</html>